<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片视图区域 -->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="2" style="display: flex; align-items: center;">
        <el-text>用户名</el-text>
      </el-col>
      <el-col :span="4">
        <el-input v-model="queryInfo.username" placeholder="请输入用户名" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="loadUserListData">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="userList" border stripe style="width: 100%">
          <el-table-column prop="id" label="编号"/>
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="phone" label="电话"/>
          <el-table-column prop="question" label="问题"/>
          <el-table-column prop="answer" label="答案"/>
          <el-table-column label="角色">
            <template #default="scope">
              <span v-if="scope.row.role == 0">
                超级管理员
              </span>
              <span v-else-if="scope.row.role == 1">
                普通用户
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页的行 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
            v-model:current-page="queryInfo.currentPage"
            v-model:page-size="queryInfo.pageSize"
            :page-sizes="[2, 4, 6, 8]"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>

import {onMounted, getCurrentInstance} from "vue";

import {getUserList} from "../../api/user.js";

export default {
  name: "User",
  data() {
    return {
      queryInfo: {
        username: '',
        currentPage: 1,
        pageSize: 2,
      },
      total: 100,
      disabled: false,
      background: false,
      userList: [
        {
          "id": 1,
          "username": "admin",
          "email": "admin@happymall.com",
          "phone": "13800138000",
          "question": "问题",
          "answer": "答案",
          "role": 0,
          "createTime": "2016-11-06 08:56:45",
          "updateTime": "2017-04-04 11:27:36"
        }
      ]
    };
  },
  methods: {
    // 改变页码时触发的函数
    handleCurrentChange(val){
      console.log(val);
      // 将修改后的当前页的值赋值给queryInfo.currentPage
      this.queryInfo.currentPage = val;
      // 刷新数据
      this.loadUserListData();
    },
    // 改变页大小时触发的函数
    handleSizeChange(val){
      console.log(val);
      // 将修改后页大小的值赋值给queryInfo.pageSize
      this.queryInfo.pageSize = val;
      // 刷新数据
      this.loadUserListData();
    },
    async loadUserListData() {
      const {data: ret} = await getUserList(this.queryInfo);
      console.log(ret);
      // this.userList = ret['data'];
      this.userList = ret['data']['data'];
      this.total = ret['data']['total'];
    }
  },
  setup() {
    console.log("setup");
    const {ctx} = getCurrentInstance();
    onMounted(() => {
      ctx.loadUserListData();
    });
  }
}
</script>

<style scoped>
.el-card {
  margin-top: 15px;
}
.el-row {
  margin-bottom: 15px;
}
</style>